<template>
	<view style="display: flex;" class="popup-root">
		<!-- 左边显示十年列表 -->
		<view style="width:50%;" class="popup-content">
			<uni-list>
				<uni-list-item v-for="year in tenyears" :clickable="true" thumb-size="base" ellipsis="2" :key="year"
					@click="tenYearClick(year)"
					:style="{'color': 'gray', 'background-color' : (year==selectTenYear?'#ffff99': '' )}">
					<template v-slot:body>
						<text style="font-size: 18px;text-align: center;width: 100%;font-weight: bold;"
							:class="{ 'itemSelected': year == selectTenYear }">
							{{ year.toString() + ' - ' + (year + 9).toString() }}
						</text>
					</template>
				</uni-list-item>
			</uni-list>
			<view class="mybutton">
				<button type="default" @click="yearMoreClick"
					style="background-color: white;border-color: white;color:gray">{{ yearMore?"常用年份":"更多年份" }}</button>
			</view>
		</view>
		<!-- 右边列表显示选中的十年 -->
		<view style="width:50%;" class="popup-content">
			<uni-list v-if="years">
				<uni-list-item v-for="year in years" :key="year" :clickable="true" @click="yearSelected(year)"
					:style="{'color': 'gray', 'background-color' : (year==selectYear?'#ffff99': '' )}">>
					<template v-slot:body>
						<view style="text-align: center;width: 100%;">
							<view style="font-size: 18px;font-weight: bold;">{{ getYearText(year) }}</view>
							<view style="font-size: 18px;color: gray;">{{ getYearNote(year) }}</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<view v-if="!years">&nbsp;</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { dateUtil } from '../../common/dateUtil';
	import { getCurrentInstance } from 'vue';
	import { GanZhi } from '../../common/ganzhi';
	export default {
		data() {
			return {
				tenyears: [],
				years: undefined as number[] | undefined,
				selectTenYear: undefined as number | undefined,
				selectYear: undefined as number | undefined,
				yearMore: false,
			}
		},
		computed: { selectcompute: function () { return this.selectTenYear } },
		mounted() {
			const eventChannel : UniApp.EventChannel = (this as any).getOpenerEventChannel();
			eventChannel.on('init', (year : number | undefined) => {
				// console.log("yeargetter->init:" + (year?.toString() ?? ""));
				this.RefreshTenYears();
				if (year) {
					this.tenYearClick(Math.floor(year / 10) * 10);
					this.selectYear = year;
				}
			})
		},
		methods: {
			RefreshTenYears() {
				let list : number[] = [];
				let start = 190;
				let end = 209;
				if (this.yearMore) {
					start = 150;
					end = 249;
				}
				for (var xx = start; xx <= end; xx++) {
					list.push(xx * 10);
				}
				this.tenyears = list;
			},
			getYearText(year : number) {
				let text = year.toString();
				text += '(' + dateUtil.getYearProperty(year);
				let yearNow = (new Date()).getFullYear();
				if (year <= yearNow) text += (yearNow - year + 1).toString() + '岁';
				text += ")";
				return text;
			},
			getYearNote(year : number) {
				let huajia = GanZhi.getHuaJiaIndexByYear(year);
				let text = GanZhi.getGanZhiTextByHuajia(huajia);
				text += " " + GanZhi.getNaYinText(huajia);
				return text;
			},
			tenYearClick(year : number) {
				let array : number[] = [];
				for (let xx = year; xx < year + 10; xx++) {
					array.push(xx);
				}
				this.years = array;
				this.selectTenYear = year;
			},
			yearSelected(year : number) {
				this.selectYear = year;
				// 获取事件通道
				const eventChannel = (this as any).getOpenerEventChannel();

				// 先返回上一页
				uni.navigateBack();

				// 发送数据（注意：必须在navigateBack之后执行，否则页面已销毁）
				eventChannel.emit('selected', year);
			},
			yearMoreClick() {
				this.yearMore = !this.yearMore;
				this.RefreshTenYears();
			}
		}
	}
</script>

<style>
	.popup-content {
		overflow-y: auto;
		/* 内容超出时显示垂直滚动条 */
	}

	.popup-root {
		max-height: 100vh;
		/* 设置最大高度为视口高度的80% */
	}

	.itemSelected {
		font-weight: bold;
	}
</style>